<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { IPackAntvX6 } from '../inter';

const props = defineProps<IPackAntvX6.MinimapProps>();
const {visible,init,time} = props;

const minimapRef = ref<HTMLDivElement>();

onMounted(() => {
    if(minimapRef.value){
        init(minimapRef.value)
    }  
})

watch(time,() => {
    if(!minimapRef.value) return;
    minimapRef.value.innerHTML = '';
    init(minimapRef.value);
})

</script>

<template>
    <div v-show="visible" class="absolute bottom-1em right-1em shadow-md z-100" @click.stop=""  @drag.stop=""  >
        <div ref="minimapRef"></div>
    </div>
</template>

<style>
.x6-widget-minimap .x6-graph {
    box-shadow:none;
}
</style>